<template>
  <div>
    <ElForm inline>
      <ElFormItem label="请假类型" prop="leaveTypes">
        <ElSelect v-model="queryCondition.leaveTypes" multiple>
          <ElOption label="病假" value="sick"></ElOption>
          <ElOption label="年假" value="annual"></ElOption>
          <ElOption label="事假" value="issue"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="申请人">
        <ElInput v-model="queryCondition.applier"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="" @click="reset()">reset</ElButton>
        <ElButton type="primary" @click="queryByCondition()">search</ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable :data="results">
      <ElTableColumn type="selection"></ElTableColumn>
      <ElTableColumn label="流水号" prop="leaveBillCode"></ElTableColumn>
      <ElTableColumn label="单据状态">
        <template #default="{ row }">
          <!-- <ElTag type="success">{{ row.billState }}</ElTag> -->
          <!-- <ElTag :type="tag(row)?.color">{{ tag(row)?.label }}</ElTag> -->
          <template v-for="(e, i) in stateDetails" :key="i">
            <ElTag v-if="e.state === row.billState" :type="e.color">{{ e.label }}</ElTag>
          </template>
        </template>
      </ElTableColumn>
      <ElTableColumn label="申请人" prop="applier"></ElTableColumn>
      <ElTableColumn label="请假原因" prop="reason"></ElTableColumn>
      <ElTableColumn label="请假类型" prop="leaveType"></ElTableColumn>
      <ElTableColumn label="操作" fixed="right">
        <template #default="{ row }">
          <ElButton size="small" type="primary" @click="open4Audit(row)">审核</ElButton>
          <ElButton size="small" type="success" @click="resent(row)">重交</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <LeaveAdvise ref="leaveAdvise" @post-auditted="queryByCondition"></LeaveAdvise>
  </div>
</template>
<script lang="ts">
import type { LeaveBill } from './LeaveApply.vue'

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'LeaveAudit',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      queryCondition: {
        applier: '',
        leaveTypes: [],
        pageNum: 1,
        pageSize: 10
      },
      results: [] as Array<LeaveBill>,
      total: 0,
      stateDetails: [
        { state: 'toSubmit', color: 'danger', label: '待提交' },
        { state: 'toAudit', color: 'warning', label: '待审核' },
        { state: 'auditted', color: 'success', label: '已通过' }
      ]
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition(1)
  },
  methods: {
    // sampleM() {},
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      const res = await axios({
        method: 'post',
        url: '/leave/query/auditor',
        data: this.queryCondition
      })
      this.total = res.data.total
      this.results = res.data.results
    },
    async open4Audit(row: LeaveBill) {
      const res = await axios({
        method: 'get',
        url: '/leave/find/' + row.leaveBillCode
      })
      const leaveAdvise: any = this.$refs.leaveAdvise
      leaveAdvise.show(res.data)
    },
    async resent(row: LeaveBill) {
      const res = await axios({
        method: 'put',
        url: '/leave/resent/' + row.leaveBillCode
      })
      this.queryByCondition()
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
